'use strict';
import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Modal,
    TouchableNativeFeedback,
} from 'react-native';
import * as Color from "../../constant/Color";

class SelectItem extends Component{
    render(){
        return(
            <View>
                <TouchableNativeFeedback background={TouchableNativeFeedback.SelectableBackground()} onPress={()=>this.onClick()} style={{flex:1}}>
                    <View style={styles.containerItem}>
                        <Text style={styles.containerItemText}>{this.props.detail}</Text>
                    </View>
                </TouchableNativeFeedback>
            </View>
        );
    }

    /** 回调给属性方法 */
    onClick(){
        this.props.onClick();
    }
}

/** 底部弹出框 */
export default class BottomPop extends Component {
    mPersons:Array  = [];
    mTitle:String   = "请选择";

    constructor(props) {
        super(props);
        this.state = {
            modalVisible: false,
        }
    }

    render() {
        let modalBackgroundStyle = { backgroundColor: 'rgba(0, 0, 0, 0.5)', };

        if(this.state.modalVisible){
            return (
                <Modal
                    animationType   = {'slide'}
                    transparent     = {true}
                    visible         = {this.state.modalVisible}
                    onRequestClose  = {() => this.setModalVisible(false)}>

                    <View style={[styles.container, modalBackgroundStyle]}>
                        <View style={[styles.containerItem, {height:60}]}>
                            <Text style={styles.containerItemTextFirstLine}>{this.mTitle}</Text>
                        </View>
                        {
                            this.mPersons.map((item,i)=>this._renderExpenseItem(item,i))
                        }
                        <View style={styles.gap}/>
                        {
                            this._renderExpenseItem('取消',-1)
                        }
                    </View>
                </Modal>
            );
        }
        else return <View/>
    }

    /** 渲染每一行 */
    _renderExpenseItem(item , i:Number){
        return <SelectItem key={i} detail={item} onClick={()=>this._onClickItem(i)}/>;
    }

    /** 控制是否显示 */
    setModalVisible = (visible:boolean) => {
        this.setState({modalVisible: visible});
    };

    /** 设置标题与初始数据,并显示 */
    setDatasAndShow = (title:string, datas:Array) => {
        if(!datas) return;
        this.mPersons = datas;
        if(datas) this.mTitle = title;
        this.setState({modalVisible: true});
    };

    /** 点击某一项(回调给属性方法) */
    _onClickItem(i:Number){
        if(i !== -1) this.props.onClick(i);
        this.setModalVisible(false);
    }
}

//样式定义
const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection:'column',
        justifyContent: 'flex-end',
        // alignItems: 'center',
    },
    containerItem:{
        height:45,
        borderColor:Color.lightGray,
        borderWidth:0.3,
        backgroundColor:Color.white,
        flexDirection:'column',
        alignItems:'center',
        justifyContent: 'center',
    },
    containerItemTextFirstLine:{
        fontSize:17,
        color:Color.darkGray,
    },
    containerItemText:{
        fontSize:17,
        color:Color.colorPrimary,
    },
    gap:{
        borderColor:Color.lightGray,
        borderBottomWidth:10,
    },
});

